<template>
  <div class="tabs">
    <div
      v-for="tab in tabs"
      :key="tab.id"
      :class="{ check: activeTab.id === tab.id }"
      @click="emit('change', tab)"
    >
      <span>{{ tab.title }}</span>
      <p>{{ tab.badge }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps(["activeTab", "tabs"]);
const emit = defineEmits<{ (e: "change", value: any): void }>();
</script>

<style scoped lang="scss">
$main-gradient: linear-gradient(
  360deg,
  var(--theme-main-gradient2) 0%,
  var(--theme-main-gradient1) 100%
);

.tabs {
  width: 100%;
  height: 1.2rem;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.3rem;
  margin-bottom: 0.25rem;
}
.tabs div {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--theme-neutral2);
  font-size: 0.44rem;
  background: var(--theme-color10);
  font-weight: 700;
  position: relative;
  border-radius: 0.2rem;
  cursor: pointer;
  user-select: none;
}
.tabs .check {
  color: var(--theme-neutral1);
  background: $main-gradient;
}
.tabs div span {
  position: relative;
  z-index: 2;
}
/* shared skew background for both tabs */
.tabs div::before {
  content: "";
  height: 100%;
  width: 50%;
  position: absolute;
  bottom: 0;
  transform: skew(30deg);
  border-radius: 0.2rem;
  background: var(--theme-color10);
}
.tabs div:nth-child(1)::before {
  right: -0.5rem;
}
.tabs div:nth-child(2)::before {
  left: -0.5rem;
}
/* active gradient overlay */
.tabs .check::before {
  background: $main-gradient !important;
}
.tabs div p {
  position: absolute;
  right: 0;
  top: -0.1rem;
  z-index: 2;
  padding: 0.05rem 0.15rem;
  font-weight: 500;
  font-size: 0.3rem;
  color: var(--theme-dec3);
  background: var(--theme-dec4);
  border-radius: 0.3rem;
}
.tabs div:nth-child(1) p {
  right: -0.7rem;
}
</style>
